<template>
	<view class="page">
		<view class="title">
			请完善以下基本信息
		</view>
		<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData" class="addForms">
			<uni-forms-item label="就诊人关系" name="relationship" required="" v-if="userid==0">
				<uni-data-select placeholder="请选择就诊人关系" v-model="baseFormData.relationship"
					:localdata="range"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="患者姓名" required name="name">
				<uni-easyinput v-model="baseFormData.name" placeholder="请输入患者姓名" />
			</uni-forms-item>
			<uni-forms-item label="年龄" name="age" required>
				<uni-easyinput v-model="baseFormData.age" maxlength="3" placeholder="请输入年龄" />
			</uni-forms-item>
			<uni-forms-item label="性别" name='sex' required>
				<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
			</uni-forms-item>
			<uni-forms-item label="证件类型" name="IDtype">
				<uni-data-select placeholder="请选择证件类型" v-model="baseFormData.IDtype"
					:localdata="IDtype"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="证件号" required name="idcard">
				<uni-easyinput v-model="baseFormData.idcard" maxlength="18" placeholder="请输入证件号" />
			</uni-forms-item>
			<uni-forms-item label="联系电话" required name="phone" v-if="userid==0">
				<uni-easyinput v-model="baseFormData.phone" maxlength="11" placeholder="请输入联系电话" />
			</uni-forms-item>
			<uni-forms-item label="现住址" required name="current_address">
				<uni-data-picker  @nodeclick="onnodeclick" :localdata="items"  popup-title="请选择现住址"
					:clear-icon="false"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="现住址详情" required name="address">
				<uni-easyinput v-model="baseFormData.address" placeholder="请输入现住址详情" />
			</uni-forms-item>
			<uni-forms-item label="联系人关系" name="relotion" required v-if="userid">
				<uni-data-select placeholder="请选择紧急联系人关系" v-model="baseFormData.relotion"
					:localdata="range"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="联系人姓名" required name="people" v-if="userid">
				<uni-easyinput v-model="baseFormData.people" placeholder="请输入紧急联系人姓名" />
			</uni-forms-item>
			<uni-forms-item label="联系人电话" required name="guardianshipphone" v-if="userid">
				<uni-easyinput v-model="baseFormData.guardianshipphone" maxlength="11" placeholder="请输入紧急联系人电话" />
			</uni-forms-item>
		</uni-forms>
		<button class="bingding" @click="submit">绑 定</button>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import api from '../../src/utils/api.js'
	const baseForm = ref(null)
	// 单选数据源
	const sexs = reactive([{
		text: '男',
		value: '男'
	}, {
		text: '女',
		value: '女'
	}])
	// 测试
	const onnodeclick = (e) => {
		console.log(e,4444)
		baseFormData.value.current_address.push(e.value)
	}
	// 就诊人关系
	const range = reactive([{
			value: "本人",
			text: "本人"
		},
		{
			value: "亲属",
			text: "亲属"
		},
		{
			value: "朋友",
			text: "朋友"
		},
	])
	// 证件类型
	const IDtype = reactive([{
			value: "居民身份证",
			text: "居民身份证"
		},
		{
			value: "港澳台通行证",
			text: "港澳台通行证"
		},
		{
			value: "外国护照",
			text: "外国护照"
		},
		{
			value: "军官证",
			text: "军官证"
		},
	])
	// 现住址
	const items = reactive([{
		text: "四川省",
		value: "四川省",
		children: [{
				text: "成都市",
				value: "成都市",
				children: [{
						text: '靖江区',
						value: "靖江区"
					},
					{
						text: '临江区',
						value: "临江区"
					}
				]
			},
			{
				text: "成都市2",
				value: "成都市2",
				children: [{
						text: '靖江区2',
						value: "靖江区2"
					},
					{
						text: '临江区2',
						value: "临江区2"
					}
				]
			},
		]
	}, ])
	const baseFormData = ref({
		relationship: '', //就诊人关系
		name: '', //患者姓名
		age:'',		//年龄
		sex:'男',		//性别
		IDtype: '', //证件类型
		idcard: '', //证件号
		phone: '', //联系电话
		current_address: [], //现住址
		address: '', //现住址详情
		relotion:'',	//紧急联系人关系
		people:'',		//紧急联系人姓名
		guardianshipphone:'',	//紧急联系人电话
	})
	const userid = ref(0)
	onLoad((option) => {
		// console.log(option.userid)
		if (option.userid) {
			userid.value = option.userid
		} else {
			userid.value = 0
		}

		// baseForm.value.clearValidate()
		baseFormData.relationship = ''
		baseFormData.name = ''
		baseFormData.IDtype = ''
		baseFormData.idcard = ''
		baseFormData.phone = ''
		baseFormData.current_address = ''
		baseFormData.address = ''
		baseFormData.age = ''
		baseFormData.sex=0
		baseFormData.relotion = ''
		baseFormData.people = ''
		baseFormData.guardianshipphone = ''
	})
	// 绑定
	const submit = () => {
		baseForm.value.validate().then(res => {
			console.log('success', res);
			if(userid.value){
				console.log('注册成功')
				api('/appregister',{
					userid:userid.value,
					...res
				},'POST').then(res=>{
					// console.log(res)
					if(res.state==200){
						uni.switchTab({
							url:'/pages/index/index'
						})
					}
				}).catch(err=>{
					console.log(err)
				})
			}else{
				console.log('添加成员信息')
				api('/appfamilyadd',{
					userid:uni.getStorageSync('userid'),
					...res
				},'POST').then(res=>{
					// console.log(res)
					if(res.state==200){
						uni.switchTab({
							url:'/pages/mine/mine'
						})
					}
				}).catch(err=>{
					console.log(err=>{
						console.log(err)
					})
				})
			}
			uni.showToast({
				title: `添加成功`
			})
			
		}).catch(err => {
			console.log('err', err);
			// customForm.value.resetFields();	//重置
		})
	}

	const rules = ref({
		relationship: {
			rules: [{
				required: true,
				errorMessage: '就诊人关系不能为空'
			}]
		},
		relotion:{
			rules: [{
				required: true,
				errorMessage: '紧急联系人关系不能为空'
			}]
		},
		name: {
			rules: [{
				required: true,
				errorMessage: '姓名不能为空'
			}]
		},
		people:{
			rules: [{
				required: true,
				errorMessage: '紧急联系人姓名不能为空'
			}]
		},
		idcard: {
			rules: [{
				required: true,
				errorMessage: '证件号不能为空'
			}, {
				format: 'number',
				errorMessage: '请输入有效证件号'
			}]
		},
		phone: {
			rules: [{
				required: true,
				errorMessage: '联系电话不能为空'
			}, {
				format: 'number',
				errorMessage: '请输入有效联系电话'
			}, {
				pattern: /^1[3-9]\d{9}$/,
				errorMessage: '请输入正确的联系电话格式',
				trigger: 'blur'
			}]
		},
		guardianshipphone:{
			rules: [{
				required: true,
				errorMessage: '紧急联系人电话不能为空'
			}, {
				format: 'number',
				errorMessage: '请输入有效紧急联系人电话'
			}, {
				pattern: /^1[3-9]\d{9}$/,
				errorMessage: '请输入正确的紧急联系人电话格式',
				trigger: 'blur'
			}]
		},
		current_address: {
			rules: [{
				required: true,
				errorMessage: '现住址不能为空'
			}]
		},
		address: {
			rules: [{
				required: true,
				errorMessage: '现住址详情不能为空'
			}]
		},
		age: {
			rules: [{
				required: true,
				errorMessage: '年龄不能为空'
			}, {
				format: 'number',
				errorMessage: '年龄只能输入数字'
			}]
		}
	})
</script>

<style lang="scss" scoped>
	.page {
		padding: 36rpx 40rpx;
		box-sizing: border-box;

		.title {
			font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
			font-size: 28rpx;
			font-weight: 700;
			margin-bottom: 30rpx;
		}

		// 表单信息
		.addForms {
			::v-deep .uni-forms-item__label {
				width: 200rpx !important;
			}

			::v-deep .uni-forms-item__content {
				width: 440rpx !important;
				margin: 0 !important;
			}
		}

		.bingding {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%8F%E9%99%A2%E7%97%85%E6%A1%88%E7%94%B3%E8%AF%B7/u5160.svg');
			font-family: 'ArialMT', 'Arial', sans-serif;
			font-size: 28rpx;
			color: #fff;
			margin-top: 100rpx;
		}
	}
</style>